<template>
	<view>
		<view class="music-head">
			<view class="icon" v-if="showIcon" :class="[className]">
				<text class="iconfont icon-zuojiantou" @click="handleBack"></text>
				<text>|</text>
				<text class="iconfont icon-shouye" @click="handleBackHome"></text>
			</view>
			<view class="title" :style="{color:textHeadColor}">{{title}}</view>
		</view>
	</view>
	
</template>

<script>
	export default{
		props:['title','showIcon','textHeadColor','className'],
		methods:{
			handleBack(){
				uni.navigateBack()
			},
			handleBackHome(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 由于右侧默认的尺寸是px，所以头部组件使用px
	.music-head{
		width: 750rpx;
		height: 80px;
		display: flex;
		position: relative;
		justify-content: center;
		text-align: center;
		// color: #fff;
		.icon{
			position: absolute;
			// top: 50rpx;
			top: var(--status-bar-height);
			left: 16rpx;
			width: 180rpx;
			height: 60rpx;
			// background-color: rgba(0,0,0,.5);
			display: flex;
			justify-content: space-around;
			border-radius: 60rpx;
			// border: 2rpx solid #e7e7e7;
			// opacity: .5;
			text{
				line-height: 30px;
			}
			text:nth-child(1){
				font-size: 15px;
			}
			text:nth-child(2){
				font-size: 10px;
			}
			text:nth-child(3){
				font-size: 15px;
			}
		}
		// detail页面状态栏 icon 特有样式
		.detail{
			color: #fff;
			background-color: rgba(0,0,0,.3);
			border: 1rpx solid #d5d5d5;
		}
		// list页面状态栏 icon 特有样式
		.list{
			color: #fff;
			background-color: rgba(100,100,100,.3);
			border: 1rpx solid #bebebe;
		}
		// search页面状态栏 icon 特有样式
		.search{
			color: #000;
			background-color: #fff;
			border: 1rpx solid #e7e7e7;
		}
		.title{
			color: #000;
			font-size: 28rpx;
			line-height: 30px;
			height: 30px;
			margin-top: var(--status-bar-height);
		}
	}
</style>
